<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模板</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .demo1 {
        border: 1px dashed red;
        height: 200px;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./28-pointer-events.html">上一篇</a>
      <a href="./30-输入行为相关.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>标题</dt>
        <dd>
          <div class="demo1">
            容器使用了resize
            <ul>
              <li>none，初始值</li>
              <li>both，都可以拉伸</li>
              <li>horizontal，仅水平方向</li>
              <li>vertical，仅垂直方向</li>
              <li>block，文档流垂直方向</li>
              <li>inline，文档流水平方向</li>
            </ul>
          </div>
        </dd>
        <dd>
          该属性不是设置了就起作用：
          <p>1、不支持内联元素</p>
          <p>2、如果是块级元素，需要overflow不为visible</p>
          <p><i>该属性通过影响style中height和width数值，来影响宽高。如果要指定边界，可以使用max/min-height/width</i></p>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
